<template>
  <div>
    <h1>EventTest组件</h1>
        
    <!-- 原生dom事件在html标签身上使用 -->
                     <!--$event这个是不能改名的，如果要填自己的参数，在括号里面加，不分先后顺序  -->
    <button  @click="test1(1,$event)">test1</button>  
      <!-- ($event)=>{
           test1($event)
      } -->


      <!-- 原生dom事件在组件标签身上使用 
    此时这个dom事件就不再是原生dom事件了，变成自定义事件了
    我还想让你是一个原生事件，此时我们需要用到一个事件描述符.native
    这个原生事件会添加到子组件的根元素身上，形成事件委派 -->
     <Event1 @click.native="test2"></Event1> 
     <!-- 这个事件添加到Event1组件里面的外层包裹的div身上了  -->


     <!-- 自定义事件在html身上使用,无意义 -->
      <button  @xxx="test3">test3</button>

      <!-- 自定义事件在组件标签身上使用 -->
      <Event2  @click="test4"  @xxx="test4"></Event2>
  </div>
</template>

<script type="text/ecmascript-6">
  import Event1 from './Event1.vue'
  import Event2 from './Event2.vue'

  export default {
    name: 'EventTest',

    components: {
      // eslint-disable-next-line vue/no-unused-components
      Event1,Event2
    },

    methods: {
        test1(a,event){
            console.log(a,event.target.innerHTML);
        },
        test2(event){
            console.log(event.target.innerHTML); 
        },
        test3(event){
            console.log(event.target.innerHTML); 
        },
        test4(event){
            console.log(event); 
        },
    }
  }
</script>
